ExtJS তে Custom Form Validation Rules তৈরি করা একটি সাধারণ প্রক্রিয়া, যা আপনাকে আপনার ফর্ম ফিল্ডের জন্য নির্দিষ্ট শর্ত তৈরি করতে সাহায্য করে। এই কাস্টম ভ্যালিডেশনগুলি ফর্ম ডেটা যাচাই করার সময় ব্যবহার করা হয় এবং এটি সাধারণত validator
ফাংশন বা asyncValidator
ফাংশন ব্যবহার করে সম্পন্ন করা হয়।
validator
: সিঙ্ক্রোনাস (synchronous) ভ্যালিডেশন এর জন্য ব্যবহার করা হয়। এটি একটি ফাংশন যা ডেটার ভিত্তিতে ফিল্ডটি বৈধ কিনা চেক করে।asyncValidator
: অ্যাসিঙ্ক্রোনাস (asynchronous) ভ্যালিডেশন, যা কলব্যাক ফাংশন ব্যবহার করে কাজ করে এবং প্রায়ই সার্ভার সাইড যাচাইয়ের জন্য ব্যবহার করা হয়।সিঙ্ক্রোনাস ভ্যালিডেশন ফাংশন সাধারণত validator
প্রপার্টির মধ্যে লেখা হয় এবং এটি ফিল্ডের ইনপুট ডেটা যাচাই করে। যদি ইনপুটটি বৈধ না হয়, এটি একটি ত্রুটি বার্তা ফিরিয়ে দেয়।
ধরা যাক, আমরা একটি ফিল্ড তৈরি করতে চাই যেখানে ব্যবহারকারীর নাম কমপক্ষে ৫ অক্ষরের হতে হবে।
Ext.create('Ext.form.Panel', {
title: 'User Form',
width: 300,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false, // এই ফিল্ডটি খালি রাখা যাবে না
validator: function(value) {
if (value.length < 5) {
return 'Username must be at least 5 characters long';
}
return true; // এটি বৈধ হলে 'true' ফেরত দেয়
}
}, {
xtype: 'button',
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Success', 'Form is valid');
} else {
Ext.Msg.alert('Failure', 'Form is invalid');
}
}
}],
renderTo: Ext.getBody()
});
এখানে:
validator
ফাংশনটি ব্যবহার করা হয়েছে যাতে ফিল্ডের ইনপুট যাচাই করা যায়। যদি নামের দৈর্ঘ্য ৫ অক্ষরের কম হয়, তবে একটি ত্রুটি বার্তা প্রদর্শিত হবে।অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন সাধারণত সার্ভার সাইড যাচাই করার জন্য ব্যবহৃত হয়, যেখানে একটি ফাংশন ব্যবহারকারীকে একটি সার্ভারে পাঠাতে এবং তার ফলাফল ফেরত পেতে পারে।
ধরা যাক, আমাদের একটি ইউজারনেম ফিল্ড রয়েছে, যেখানে আমাদের সার্ভার চেক করতে হবে যে এটি আগে নিবন্ধিত হয়েছে কিনা।
Ext.create('Ext.form.Panel', {
title: 'User Form',
width: 300,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false,
validator: function(value) {
// এটি অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন, কলব্যাক ফাংশন ব্যবহার করে
var result = false;
Ext.Ajax.request({
url: '/check-username', // সার্ভার API
params: { username: value },
async: false,
success: function(response) {
var data = Ext.decode(response.responseText);
if (data.exists) {
result = 'Username already exists';
} else {
result = true;
}
},
failure: function() {
result = 'Server error';
}
});
return result;
}
}, {
xtype: 'button',
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Success', 'Form is valid');
} else {
Ext.Msg.alert('Failure', 'Form is invalid');
}
}
}],
renderTo: Ext.getBody()
});
এখানে:
async: false
সেট করা হয়েছে যাতে Ext.Ajax.request
সার্ভারের সঙ্গে যোগাযোগ করার পর সিঙ্ক্রোনাস ভ্যালিডেশন শেষে তার ফলাফল ফেরত দেয়।validator: function(value) {
var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailRegex.test(value)) {
return 'Please enter a valid email address';
}
return true;
}
validator: function(value) {
var phoneRegex = /^[0-9]{10}$/;
if (!phoneRegex.test(value)) {
return 'Phone number must be 10 digits';
}
return true;
}
ফর্মের পুরো ভ্যালিডেশন চালাতে, আপনি form.isValid()
ব্যবহার করতে পারেন যা সমস্ত ফিল্ডের জন্য কাস্টম ভ্যালিডেশন চেক করবে।
var form = this.up('form').getForm();
if (form.isValid()) {
// ফর্ম সঠিক হলে, সার্ভারে পাঠান বা প্রয়োজনীয় কার্যকলাপ করুন
console.log('Form is valid!');
} else {
console.log('Form is invalid!');
}
validator
: সিঙ্ক্রোনাস ভ্যালিডেশন জন্য ব্যবহৃত হয়, যেখানে ডেটা ফিল্ডের ইনপুট যাচাই করা হয়।asyncValidator
: অ্যাসিঙ্ক্রোনাস ভ্যালিডেশন যা সার্ভার সাইড যাচাইয়ের জন্য ব্যবহৃত হয়।form.isValid()
: পুরো ফর্মের ভ্যালিডেশন চেক করার জন্য ব্যবহৃত হয়।এটি আপনার ফর্মের ডেটা যাচাই এবং ব্যবহারকারীদের জন্য সঠিক ইনপুট নিশ্চিত করতে সহায়ক।
Read more